import React from './react';//核心库
import ReactDOM from './react-dom';//DOM渲染库
/**
 * 1.不要直接修改state,直接修改不能刷新页面 setState包含了刷新界面的操作，就是让真实DOM和最新虚拟DOM保持 一致
 * 2.setState的更新可能会被合并  说明setState里传的对象会跟老的对象进行合并，并不会直接 覆盖
 *    老有新有则更新   老没有新有则添加 老有新没有则保持原值
 * 3.面试必问  setState的更新可能是异步的
 * 在事件处理函数里setState的时候并不会直接修改状态，而是先把partialState放入一个数组缓存起来，等事件执行结束了再统一更新
 * 
 */
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: '计数器', number: 0 };
  }
  /**
   * let updateQueue = [];
   * updateQueue.push({ number: 1 });
   * updateQueue.push({ number: 1});
   * this.state.number=0
   * this.state = { name: '计数器', number: 1 };;
   */
  handleClick = () => {
    //this.setState({ number: this.state.number + 1 });
    //this.state.number = this.state.number + 1;
    /* this.setState({ number: this.state.number + 1 }, () => {
      console.log(this.state.number);//0
    });

    this.setState({ number: this.state.number + 1 }, () => {
      console.log(this.state.number);//0
    }); */
    this.setState(prevState => ({ number: prevState.number + 1 }), () => {
      console.log(this.state.number);//0
    });
    console.log(this.state.number);
    this.setState(prevState => ({ number: prevState.number + 1 }), () => {
      console.log(this.state.number);//0
    });
    console.log(this.state.number);
  }
  render() {
    return (
      <div>
        <h1>{this.state.name}:{this.state.number}</h1>
        <button onClick={this.handleClick}>+</button>
      </div>
    )
  }
}

ReactDOM.render(<Counter />, document.getElementById('root'));
/*
绑定事件的时候 虚拟DOM JSX绑定和原生DOM不一样
1. 属性名 JSX onClick 原生DOM onclick
2. 值  JSX 函数的指针 函数变量名 原生DOM 字符串
*/